<template>
	<div class="modal-container">
		<el-dialog title="仓库设置" width="1000px" custom-class="modal-points-add" :close-on-click-modal="false"
			:visible.sync="show" :before-close="on_before_close" :closed="on_closed">
			<div class="modal-inner">
				<div class="modal-ctx">
					<div class="input-box flex">
						<div class="label">仓库名称</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.title" placeholder="仓库名称"> </el-input>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">仓库编号</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.sn" placeholder="仓库编号"> </el-input>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">负责人</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.name" placeholder="负责人"> </el-input>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">负责人电话</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.phone" placeholder="负责人电话"> </el-input>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">所在地区</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.position" placeholder="所在地区"> </el-input>
						</div>
					</div>
					<div class="input-box flex">
						<div class="label">详细地址</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.address" placeholder="详细地址"> </el-input>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">状态</div>
						<div class="input-item">
							<el-radio-group v-model="form.status">
								<el-radio :label="1">启用</el-radio>
								<el-radio :label="0">禁用</el-radio>
							</el-radio-group>
						</div>
					</div>

				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="" @click="show = false">取消</el-button>
				<el-button type="primary" @click="do_submit()">确认</el-button>
			</span>
		</el-dialog>



	</div>
</template>

<script>
	import {
		mapState
	} from "vuex";

	export default {
		name: "modal-hetong",
		components: {

		},
		data() {
			return {
				show: false,
				info: {

				},
				form: {
					id: '',
					title: '',
					sn: '',
					address: '',
					name: '',
					phone: '',
					position: '',
					areaId: '',
					status: 1,
				},
			};
		},
		computed: {},
		watch: {

		},
		created() {

		},
		methods: {
			init(row) {
				if (row) {
					this.info = row || {}
					this.form = {
						id: row.id,
						title: row.title,
						sn: row.sn,
						address: row.address,
						name: row.name,
						phone: row.phone,
						position: row.position,
						areaId: row.areaId,
						status: row.status,
					}
				} else {

				}
				this.show = true;
			},
			on_before_close() {
				this.show = false;
			},
			on_closed() {
				this.form = {
					id: '',
					title: '',
					sn: '',
					address: '',
					name: '',
					phone: '',
					position: '',
					areaId: '',
					status: 1,
				}
			},
			do_submit() {
				if (!this.form.title) {
					alertErr("请填写仓库名称");
					return;
				}

				this.$api({
					url: '/admin_service.php',
					method: 'get',
					data: {
						action: "kucun_storeSave",
						id: this.info.id || '',
						...this.form
					}
				}).then(res => {
					alert(res)
					if (res.code == 200) {
						this.$emit('confirm')
						this.show = false
					}
				})
			},

			

		

		},
	};
</script>

<style scoped lang="less">
	/deep/ .modal-points-add {
		// margin-top: 80px !important;
		.modal-inner {
			padding: 0;
		}

		.el-dialog__header {
			.flex-between();
			border-bottom: 1px solid #eee;
			background: #a98c4d;
			background: #f7f7f7;
			height: 60px;
			line-height: 60px;
			padding: 0 20px;
			font-size: 18px;
			color: #333;

			.el-dialog__title {
				color: #000;
			}

			.el-dialog__headerbtn {

				// top: 0;
				.el-dialog__close {
					color: #000;
					font-size: 20px;
					font-weight: bold;
				}
			}
		}

		.el-dialog__body {
			padding: 0;
		}

		.el-dialog__footer {
			text-align: center;
		}



		.modal-ctx {
			padding: 30px 50px;
			max-height: 60vh;
			overflow-y: auto;
			border-bottom: 1px solid #ddd;

			.tip {
				margin-bottom: 20px;
				color: #444;
				font-size: 14px;
			}

			.input-box {
				margin-bottom: 15px;
				position: relative;

				&.flex {
					display: flex;
					align-items: flex-start;
					// align-items: center;

					.label {
						margin-bottom: 0;
					}
				}

				.label {
					min-width: 120px;
					// margin-right: 20px;
					margin-bottom: 20px;
					font-size: 14px;
					color: #6e7285;
				}

				.input-item {
					flex: 1;
					display: flex;
					align-items: center;


					.el-input {
						width: 220px;
						width: 100%;
					}

					.el-select {
						width: 100%;
					}
				}
			}
		}

		.upload-ctx {
			margin: 20px 0;
		}

		.btn-send {}
	}
</style>